<template>
  <el-color-picker :predefine="predefineColors" :value="color" @change="change"></el-color-picker>
</template>

<script>
import { setTheme } from '@/common/plugins/theme/themeSet'

export default {
  components: {},
  model: {
    prop: 'color',
    event: 'change',
  },
  props: {
    color: String,
    themeLocal: String,
  },
  data: () => ({
    predefineColors: [
      '#00B32D',
      '#007bff',
      '#343a40',
      '#795548',
      '#009688',
      '#ffc107',
      '#607d8b',
      '#ff5722',
    ],
  }),
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    change(value) {
      setTheme(value, this.themeLocal)
      this.$emit('change', value)
    },
  },
}
</script>

<style lang="scss" scoped></style>
